<template>
	<el-dialog
		:title="`会员总返水详情`"
		:visible="visible"
		width="1300px"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			:data="tableData"
			style="width: 100%"
			class="small-size-table"
			:max-height="tableHeight"
			:header-cell-style="getRowClass"
		>
			<el-table-column
				type="index"
				label="#"
				min-width="80"
				align="center"
			/>
			<el-table-column
				align="center"
				min-width="180"
				label="结算周期"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.reportDate || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="会员账号"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.memberName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="直属上级代理"
				min-width="160"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.parentProxyName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="返水状态"
				show-overflow-tooltip
				min-width="160"
			>
				<template slot-scope="scope">
					{{
						getTypeName(scope.row.payoutStatus, payoutStatusArr) ||
						'-'
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				min-width="180"
				label="个人返水"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{
						handleTotalNumber(
							'USDT',
							scope.row.truncateRebateAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="发放时间"
				show-overflow-tooltip
				min-width="160"
			>
				<template slot-scope="scope">
					{{ scope.row.payoutTime || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div slot="footer" class="dialog-footer">
			<el-pagination
				v-if="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'

export default {
  mixins: [list],
  props: {
    curData: {
      type: Object,
      default: () => { }
    },
    visible: {
      type: Boolean,
      default: false
    },
    handleVisible: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tableHeight: 400,
      payoutStatusArr: [
        {
          code: 1,
          description: '待发放'
        },

        {
          code: 3,
          description: '已发放'
        },
        {
          code: 5,
          description: '无收益'
        },
        {
          code: 6,
          description: '已取消'
        }
      ]
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    handleSizeChange(value) {
      this.pageNum = 1
      this.pageSize = value
      this.getTableData()
    },
    handleCurrentChange(value) {
      this.pageNum = value
      this.getTableData()
    },
    getTableData() {
      this.loading = true
      this.tableData = []
	  console.log(this.curData)
      this.$api
        .getProxyCommissionCashMemberCommissionList(
          this.getParams({
            id: this.curData.id,
            proxyId: this.curData.proxyId,
            startTime: this.curData.cycleStartDate,
            endTime: this.curData.cycleEndDate
          })
        )
        .then((res) => {
          this.loading = false
          this.tableData = res?.data?.record || []
          this.total = res?.data?.totalRecord || 0
        })
        .catch(() => {
          this.loading = false
        })
    },
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .pageValue {
	position: unset;
	margin-left: 0px;
}
</style>
